<template>
  <div class="app-container ohn quotation-box">
    <el-divider content-position="left">基本信息</el-divider>
    <el-descriptions class="margin-top" title="" :column="3" size="small">
      <el-descriptions-item>
        <template slot="label"> 客户&nbsp;Client </template>
        {{ quotationDetail.client }}
      </el-descriptions-item>
      <el-descriptions-item>
        <template slot="label"> 联络人 Attn </template>
        {{ quotationDetail.client }}
      </el-descriptions-item>
      <el-descriptions-item>
        <template slot="label"> 客户电话 Tel </template>
        {{ quotationDetail.telClient }}
      </el-descriptions-item>
      <el-descriptions-item>
        <template slot="label"> 客户传真 Tel </template>
        {{ quotationDetail.faxClient }}
      </el-descriptions-item>
      <el-descriptions-item>
        <template slot="label"> 客户邮箱 E-mail </template>
        {{ quotationDetail.email }}
      </el-descriptions-item>
      <el-descriptions-item>
        <template slot="label"> 发票抬头 Invocie Title</template>
        {{ quotationDetail.invoiceTitle }}
      </el-descriptions-item>
      <el-descriptions-item>
        <template slot="label"> 报价单编号 Quotation No </template>
        {{ quotationDetail.quotationNum }}
      </el-descriptions-item>
      <el-descriptions-item>
        <template slot="label"> 公司 From </template>
        {{ quotationDetail.desc }}
      </el-descriptions-item>
      <el-descriptions-item>
        <template slot="label"> 公司电话 Tel'</template>
        {{ quotationDetail.telCom }}
      </el-descriptions-item>
      <el-descriptions-item>
        <template slot="label"> 公司传真 Tel </template>
        {{ quotationDetail.faxCom }}
      </el-descriptions-item>
      <el-descriptions-item>
        <template slot="label"> 报价日期 Date </template>
        {{ quotationDetail.gmtCreate }}
      </el-descriptions-item>
      <el-descriptions-item>
        <template slot="label"> 报告类型 Report Type</template>
        {{ quotationDetail.reportType }}
      </el-descriptions-item>
      <el-descriptions-item>
        <template slot="label"> 报告邮寄地址 Re.delivery to </template>
        {{ quotationDetail.deliveryAddress }}
      </el-descriptions-item>
      <el-descriptions-item>
        <template slot="label"> 测试周期 Test period </template>
        {{ quotationDetail.testPeroid }}
      </el-descriptions-item>
    </el-descriptions>
    <el-divider class="mb36" content-position="left">费用信息</el-divider>
    <el-descriptions class="margin-top" title="" :column="3" size="small">
      <el-descriptions-item>
        <template slot="label"> 报告费 E-mail </template>
        {{ quotationDetail.client }}
      </el-descriptions-item>
      <el-descriptions-item>
        <template slot="label"> 快递费&nbsp;Client </template>
        {{ quotationDetail.client }}
      </el-descriptions-item>
      <el-descriptions-item>
        <template slot="label"> 税费 Attn </template>
        {{ quotationDetail.client }}
      </el-descriptions-item>
      <el-descriptions-item>
        <template slot="label"> 折扣 Tel </template>
        {{ quotationDetail.telClient }}
      </el-descriptions-item>
      <el-descriptions-item>
        <template slot="label"> 总费用 Tel </template>
        {{ quotationDetail.faxClient }}
      </el-descriptions-item>
      <el-descriptions-item>
        <template slot="label"> 备注 E-mail </template>
        {{ quotationDetail.email }}
      </el-descriptions-item>
    </el-descriptions>
    <el-divider class="mb36" content-position="left">账户信息</el-divider>
    <el-descriptions class="margin-top" title="" :column="3" size="small">
      <el-descriptions-item>
        <template slot="label"> 户名&nbsp;Client </template>
        {{ quotationDetail.bankAccountName }}
      </el-descriptions-item>
      <el-descriptions-item>
        <template slot="label"> 账号 Attn </template>
        {{ quotationDetail.bankAccount }}
      </el-descriptions-item>
      <el-descriptions-item>
        <template slot="label"> 银行名称 Tel </template>
        {{ quotationDetail.bankName }}
      </el-descriptions-item>
      <el-descriptions-item>
        <template slot="label"> 公司签名 Tel </template>
        {{ quotationDetail.clientComSignature }}
      </el-descriptions-item>
      <el-descriptions-item>
        <template slot="label"> 立标代表签名 E-mail </template>
        {{ quotationDetail.libiaoRepresentativeSignature }}
      </el-descriptions-item>
      <el-descriptions-item>
        <template slot="label"> 盖章&nbsp;Client </template>
        {{ quotationDetail.clientComChop }}
      </el-descriptions-item>
      <el-descriptions-item>
        <template slot="label"> 审核人员 Attn </template>
        {{ quotationDetail.audit }}
      </el-descriptions-item>
      <el-descriptions-item>
        <template slot="label"> 客户签名日期 Tel </template>
        {{ quotationDetail.clientSignatureDate }}
      </el-descriptions-item>
      <el-descriptions-item>
        <template slot="label"> 立标签名日期 Tel </template>
        {{ quotationDetail.libiaoSignatureDate }}
      </el-descriptions-item>
    </el-descriptions>
    <el-divider content-position="left">报价单明细</el-divider>
    <vxe-table
      ref="xTable"
      border
      show-footer
      show-overflow
      class="editable-footer mb20"
      :merge-footer-items="mergeFooterItems"
      :row-config="{ isHover: true }"
      :export-config="{}"
      :footer-method="footerMethod"
      :data="quotationDetail.testQuotationItemList"
    >
      <vxe-column type="seq" width="60" :title="'序号 Num'" align="right" />
      <vxe-column field="reportNum" :title="'报告编号 Report No'" />
      <vxe-column field="productDes" :title="'产品名称 Product Description'" />
      <vxe-column field="style" :title="'型号 Style/Item No'" />
      <vxe-column field="materialColor" :title="'材质/颜色 Material/Color'" />
      <vxe-column field="testItem" :title="'测试项目 Test Item'" />
      <vxe-column field="unitPrice" :title="'单价 Unit Price'" />
      <vxe-column field="qty" :title="'测试点数 Qty'" />
      <vxe-column field="amountRmb" :title="'测试金额 Amount/RMB'" />
    </vxe-table>
    <el-divider content-position="left">备注</el-divider>
    <div class="remark-content">
      <div class="fb">注意 Remark：</div>
      <p>
        1.
        在我方按照经客户确认过的信息颁发报告后。如客户有修改要求，我方将按照RMB
        100 元/次的标准收取报告修改费。
      </p>
      <p>
        2. 样品开案之前需 100%
        全款到帐，以收到付款凭证为准。如有延迟，我方将顺期延迟发送检测报告！
      </p>
      <p>
        3. 开案必备条件<span class="fb"
          >（特别提醒：因提交以下资料滞后而影响测试周期的，责任由客户自己承担）</span
        >。<br />
        a. 送样要求：样品量应满足测试所需。<br />
        b. 回签确认该报价单。<br />
        c. 提交确认、签字了的测试申请单。
      </p>
      <p>
        4.
        该报价自生效之日起一个月内有效，一个月后未开始测试的或未被申请退回的样品会被自动处理掉。
      </p>
      <p>
        5.
        当仅依据产品图片或测试相关资料进行报价的，报价和测试周期仅供参考，最终需以实际收到样品后确定的报价及测试周期为准。
      </p>
      <p>6. 上述部分项目可能会分包至我们的分包实验室进行测试。</p>
      <p>
        7. 本公司对测试报告只承担被证实的过失责任，并且赔偿金额不超过测试费用的
        5 倍。
      </p>
      <p>
        8.
        报告语言：如需出具英文报告，请提供相关的英文信息（如公司抬头，地址，样品及其零部件的名称），若在确认报价单前未能提供，我司将默认为自行翻译。届时若因翻译问题而需修改报告，我司将须收取报告修改费用。
      </p>
      <p>9. 报告方式：如需提供纸质报告，我方将收取RMB 100元/份的纸质报告</p>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    QuotationDetailData: {
      type: Object,
    },
  },
  watch: {
    QuotationDetailData: {
      handler(newVal, oldVal) {
        this.quotationDetail = this.QuotationDetailData;
      },
      deep: true,
    },
  },
  data() {
    return {
      quotationDetail: {},
      mergeFooterItems: [{ row: 0, col: 0, rowspan: 0, colspan: 8 }],
    };
  },
  methods: {
    footerMethod({ columns, data }) {
      return [
        columns.map((column, columnIndex) => {
          if (columnIndex === 0) {
            return "总金额：";
          }
          if (["amountRmb"].includes(column.property)) {
            return this.sumNum(data, column.property) + "元";
          }
          return null;
        }),
      ];
    },
    sumNum(list, field) {
      let count = 0;
      list.forEach((item) => {
        count += Number(item[field]);
      });
      return count;
    },
  },
};
</script>
<style lang="scss" scoped>
.quotation-box {
  .remark-content {
    font-size: 12px;
    color: #808080;
    line-height: 20px;
  }
}
</style>
